// 火影忍者 首图 详情图 生成
import {
  getURLBase64Image,
  loadImages,
  drawImagesAreaBg,
  drawBgBorder,
} from "./getUrlImg";
import { setPageImgArr } from "./common"
// 生成火影忍者首图
export async function makeTitleImgHYRZ(data, list, attrs) {
  return new Promise(async (resolve, reject) => {
    // 取出已选择项
    let arr = [];
    let sm = "";
    let v = "";
    let tls = ''
    list = list.split(",");
    if (!list || list == []) {
      reject("多选不能为空");
    }
    if (data.f14rander && data.f14rander.length) {
      tls = data.f14rander.length
    }
    if (list && list.length) {
      attrs.forEach(async (item1) => {
        if (item1.aavName == "f7") {
          item1.childAttributes.forEach(async (item2) => {
            if (item2.id == data.f7) {
              sm = item2.fieldName;
            }
          });
        }
        if (item1.aavName == "f3") {
          item1.childAttributes.forEach(async (item2) => {
            if (item2.id == data.f3) {
              v = item2.fieldName;
            }
          });
        }
        if (item1.fieldType == "checkbox" && item1.isEnable === "0") {
          item1.childAttributes.forEach(async (item2) => {
            if (list.indexOf(String(item2.id)) > -1 && item2.imgUrl) {
              arr.push(item2);
            }
          });
        }
      });
    }

    try {
      const mainBg = await getURLBase64Image(
        "https://imgage.maimaihao.com/makeImg/huoying/HYRZmainbg.png"
      );
      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d");
      canvas.width = mainBg.width;
      canvas.height = mainBg.height;
      context.drawImage(mainBg, 0, 0, mainBg.width, mainBg.height);
      context.fillStyle = "#ffffff";

      // 左侧展示
      context.font = "bold 35px Adobe Ming Std";
      // 编号、系统、实名、区服、V等级、战斗力、S忍者数、通灵兽
      context.fillText(`${data.thirdId || "--"}`, 192, 570); //编号
      context.fillText(
        `${data.systemName + data.carrierName || "--"}`,
        192,
        688
      ); //系统
      context.fillText(`${sm || "--"}`, 192, 805); //实名
      context.fillText(`${data.f12 ? data.f12 + '区' : '--'}`, 192, 918); //区服
      context.fillText(`${v || "--"}`, 192, 1031); //V等级
      context.fillText(`${data.f10 || "--"}`, 210, 1150); //战斗力
      context.fillText(`${data.f1 || "--"}`, 260, 1265); //S忍者数
      context.fillText(`${tls || "--"}`, 284, 1380); //通灵兽
      // context.fillText(`${sm || "--"}`, 140, 1154); //实名
      //  加载皮肤图片
      context.font = "28px Adobe Ming Std";
      let skinImgs = [];
      if (arr && arr.length) {
        skinImgs = await loadImages(arr, 45);
      } else {
        // 没有Sren
      }
      if (skinImgs && skinImgs.length) {
        // 开始绘制
        // startX,startY,rowNum,borderImg,imgWidth1,imgHeight,stepY,stepX
        // 下载皮肤背景图
        let defaultSkinbg = await getURLBase64Image(
          "https://imgage.maimaihao.com/makeImg/huoying/itemborder.png"
        );
        // 下载星级图
        let star1 = await getURLBase64Image(
          "https://imgage.maimaihao.com/makeImg/huoying/star1.png"
        );
        let star2 = await getURLBase64Image(
          "https://imgage.maimaihao.com/makeImg/huoying/star2.png"
        );
        let star3 = await getURLBase64Image(
          "https://imgage.maimaihao.com/makeImg/huoying/star3.png"
        );
        let star4 = await getURLBase64Image(
          "https://imgage.maimaihao.com/makeImg/huoying/star4.png"
        );
        let star5 = await getURLBase64Image(
          "https://imgage.maimaihao.com/makeImg/huoying/star5.png"
        );
        let opts = {
          startX: 530,
          startY: 225,
          rowNum: 9,
          stepY: 26,
          stepX: 16,
          txtLineHeight: 20,
          imgWidth1: 205,
          imgHeight: 205,
          bgImgs: [star1,star2,star3,star4,star5,],
          txtInside: true,
          defaultSkinbg: defaultSkinbg,
          gameId: 10,
          textColor: '#fff'
        };
        drawImagesAreaBg(context, skinImgs, opts);
        // 绘制结束
        const base64Url = canvas.toDataURL("image/jpeg", 0.8);
        resolve(base64Url);
      } else {
        const base64Url = canvas.toDataURL("image/jpeg", 0.8);
        resolve(base64Url);
      }
    } catch (error) {
      reject(error);
    }
  });
}

// // 生成详情图-火影忍者 多图
export async function makeDetailImgHYRZ(data, skins, attrs) {
  // console.log("%c Line:147 🍯 attrs", "color:#3f7cff", attrs);
  // console.log("%c Line:147 🍢 skins", "color:#2eafb0", skins);
  // console.log("%c Line:147 🥪 data", "color:#2eafb0", data);
  // data = smock.xqData
  // skins = smock.skins
  // attrs = smock.xqAttrs
  return new Promise(async (resolve, reject) => {
    // 处理实名
    // let shimingList = attrs.filter((i) => {
    //   return i.aavName == "f1";
    // });
    // let sm = "";
    // if (shimingList.length && data.f1) {
    //   sm = shimingList[0].childAttributes.filter((i) => {
    //     return i.id == data.f1;
    //   });
    // }

    // data.sm = sm && sm.length ? sm[0].fieldName : "--";

    // // 分页数据
    // let { opts, imgPageArr } = await setPageImgArr(skins, {
    //   headHeight: 180,
    //   skinLineNum:8,
    //   skinLineHeight:300,
    //   typeNameHwight:0,
    //   gameId:10
    // })
    // 下载单个背景图
    let defaultSkinbg = await getURLBase64Image(
      "https://imgage.maimaihao.com/makeImg/huoying/detailitembg.png"
    );
      // 下载星级图
      let star1 = await getURLBase64Image(
        "https://imgage.maimaihao.com/makeImg/huoying/star1.png"
      );
      let star2 = await getURLBase64Image(
        "https://imgage.maimaihao.com/makeImg/huoying/star2.png"
      );
      let star3 = await getURLBase64Image(
        "https://imgage.maimaihao.com/makeImg/huoying/star3.png"
      );
      let star4 = await getURLBase64Image(
        "https://imgage.maimaihao.com/makeImg/huoying/star4.png"
      );
      let star5 = await getURLBase64Image(
        "https://imgage.maimaihao.com/makeImg/huoying/star5.png"
      );

      // 取出所有图片  一维数组
      const skinsList = []
      if (skins && skins.length){
        skins.forEach(r=>{
          if(r.list&&r.list.length){
            r.list.forEach(r2=>{
              skinsList.push(r2)
            })
          }
        })
      }
    // 绘制图片
    let imgsArr = [];
    if (skinsList && skinsList.length) {
      const skinImgs = await loadImages(skinsList, skinsList.length);
      // console.log("%c Line:203 🥔 skinImgs", "color:#fca650", skinImgs);
      let base64Img = await makeDetailImgWwqyOne(
        skinImgs,
        data,
        [star1,star2,star3,star4,star5],
        defaultSkinbg
      );
      imgsArr.push(JSON.stringify(base64Img));
      resolve(imgsArr);
    }
    // if (imgPageArr && imgPageArr.length) {
    //   // console.log("%c Line:184 🥪 imgPageArr", "color:#465975", imgPageArr);
    //   for (let k = 0; k < imgPageArr.length; k++) {
    //     let base64Img = await makeDetailImgWwqyOne(
    //       imgPageArr[k],
    //       data,
    //       [star1,star2,star3,star4,star5],
    //       defaultSkinbg,
    //       opts,
    //     );
    //     imgsArr.push(JSON.stringify(base64Img));
    //     if (k == imgPageArr.length - 1) {
    //       resolve(imgsArr);
    //     }
    //   }
    // }
  });
}
// 绘制一个 火影忍者 详情图
async function makeDetailImgWwqyOne(skinImgs, data, bgImgs, defaultSkinbg, opts) {
  ////console.log("%c Line:203 🍌 typeArr", "color:#93c0a4", typeArr);
  // 先计算当前页图片的高度
  let lineHeight = 300;
  let skinHeight = 0;
  let lineNum = 0;
  let skinNum = 0;
  if (skinImgs && skinImgs.length) {
    lineNum = lineNum + Math.ceil(skinImgs.length / 8);
  }else{
    
  }
  skinHeight = Math.ceil(lineNum * lineHeight) + 270; //所有皮肤 包括分类标题的高度  页尾距离
  // 开始创建画布
  let y = 220; //图的绘制时距离上端的距离
  let x = 100; //绘制皮肤时的x距离
  // 创建canvas实例
  const canvas = document.createElement("canvas");
  canvas.style.background = "#2c0e10";
  const context = canvas.getContext("2d");
  canvas.width = 2560;
  canvas.height = Math.ceil(skinHeight);
  context.font = "40px Adobe Ming Std";
   // 下载主背景
   let mainBgImg = await getURLBase64Image(
    "https://imgage.maimaihao.com/makeImg/huoying/detailheader.png"
  );
  // 下载中间背景
  let centerBgImg = await getURLBase64Image(
    "https://imgage.maimaihao.com/makeImg/huoying/detailbg.png"
  );

  // 开始绘制
  // 绘制整体背景色
  drawBgBorder(context, 0, 0, canvas.width, skinHeight, {
    radius: 0,
    borderWidth: 0,
    startColor: "#2c0e10",
    centerColor1: "#2c0e10",
    centerColor2: "#2c0e10",
    endColor: "#2c0e10",
    borderColor: "#2c0e10",
  });

  // 绘制背景图
  context.drawImage(mainBgImg, 0, 0, canvas.width, 180);
  // 绘制主要区域的背景
  drawBgBorder(context, 63, 190, canvas.width - 126, skinHeight - 250, {
    radius: 12,
    borderWidth: 1,
    startColor: "#56160c",
    centerColor1: "#56160c",
    centerColor2: "#56160c",
    endColor: "#56160c",
    borderColor: "#56160c",
  });
  // 绘制中间背景图
  context.drawImage(centerBgImg, 300, 300,1232, 1063);

  // 开始绘制皮肤
  if (skinImgs && skinImgs.length) {
    let opts = {
      startX: x,
      startY: y,
      rowNum: 8,
      stepY: 30,
      stepX: 30,
      txtLineHeight: 0,
      imgWidth1: 270,
      imgHeight: 270,
      bgImgs: [...bgImgs],
      txtInside: true,
      defaultSkinbg: defaultSkinbg,
      gameId: 10,
      textColor: '#fff',
      hideTxt:true
    };
    drawImagesAreaBg(context, skinImgs, opts);
  }
  return canvas.toDataURL("image/jpeg", 1);
}
